<!-- 顶部swiper banner -->
<template>
  <!-- <div>
    <div class="swiper-slide" v-for="(item, index) in banners" :key="index">
      <img :src="item.colImage" class="swiper-lazy" />
    </div>
  </div> -->
	<div class="swiper-container swiper1">
		<div class="swiper-wrapper">
			<div class="swiper-slide" v-for="(item, index) in banners" :key="index">
				<img :src="item.colImage" class="swiper-lazy" />
			</div>
		</div>
		<!-- <div class="swiper-pagination"></div> -->
	</div>
</template>

<script>
import '@/assets/css/swiper.min.css'
import Swiper from '@/assets/js/swiper.min.js'
export default {
	props: {
		banners: {
			type: Array,
			default: [],
		},
	},
	watch: {
		banners(nv) {
			if (Array.isArray(nv)) {
				
			}
		},
	},
	mounted() {
		this.initSwiper()
	},
	methods: {
		initSwiper() {
			console.log('111111111111 initSwiper')
			let swiper = new Swiper('.swiper1', {
				autoplay: {
					delay: 5000,
					disableOnInteraction: false,
				},
				speed: 700,
				allowTouchMove: true,
				loop: true,
				// pagination: {
				// 	el: '.swiper-pagination',
				// 	renderBullet: function (index, className) {
				// 		return '<div class="' + className + '"><span></span><i></i></div>'
				// 	},
				// },
			})
			window.onresize = function () {
				swiper.update()
			}
		},
	},
}
</script>

<style lang="scss" scoped>
.swiper1 {
	z-index: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
</style>

<!-- 顶部广告栏 自定义swiper 分页器样式 -->
<style scope>
.swiper-slide {
}

/*.swiper-lazy {
	object-fit: cover;
}*/

.swiper-lazy {
  margin-top: 0px;
  object-fit: cover;
  width: 100%;
  top: 0;
  left: 0;
  height: calc(100%);
}

.swiper-pagination-bullets {
	bottom: 120px !important;
}

.swiper-pagination-bullet {
	background-color: transparent;
	opacity: 1;
	margin: 0 6px !important;
	width: 220px;
	height: 9px;
	position: relative;
	outline: none;
	vertical-align: middle;
}

.swiper-pagination-bullet span {
	width: 220px;
	height: 3px;
	background-color: rgba(255, 255, 255, 1);
	display: block;
	margin-top: 3px;
}

.swiper-pagination-bullet i {
	background-color: rgba(0, 85, 255, 1);
	height: 3px;
	width: 220px;
	position: absolute;
	top: 3px;
	transform: scaleX(0);
	transform-origin: left;
	z-index: 3;
	transition-timing-function: linear;
}

/* 与autoplay delay的时间保持一致 */
.swiper-pagination-bullet-active i {
	animation: middle 5.5s forwards;
}

@keyframes middle {
	0% {
		transform: scaleX(0);
		left: 0;
	}

	100% {
		transform: scaleX(1);
		left: 0;
	}
}
</style>
